<script setup lang="ts">
import type {
  Resource,
  ResourceType,
  SystemStatus,
} from '#/api/resource-center/types';

import { computed, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { message } from 'ant-design-vue';

import { resourceApi } from '#/api/resource-center/resource-api';

import ResourceAttributes from './detail/ResourceAttributes.vue';
import ResourceBehaviors from './detail/ResourceBehaviors.vue';
import ResourceCapability from './detail/ResourceCapability.vue';
import ResourceEvents from './detail/ResourceEvents.vue';
import ResourceGovernance from './detail/ResourceGovernance.vue';
import ResourceLifecycle from './detail/ResourceLifecycle.vue';
import ResourceMonitoring from './detail/ResourceMonitoring.vue';
// 导入子组件
import ResourceOverview from './detail/ResourceOverview.vue';
import ResourceRelations from './detail/ResourceRelations.vue';
import ResourceVersions from './detail/ResourceVersions.vue';

// Props
interface Props {
  resource: Resource;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  update: [];
}>();

// 响应式数据
const activeTab = ref('overview');

// 计算属性
const resourceTypes = computed(() => [
  { value: ResourceType.DIGITAL, label: '数字资源' },
  { value: ResourceType.HUMAN, label: '人力资源' },
  { value: ResourceType.PHYSICAL, label: '物理资源' },
  { value: ResourceType.SERVICE, label: '服务资源' },
  { value: ResourceType.VIRTUAL, label: '虚拟资源' },
  { value: ResourceType.CAPABILITY, label: '能力资源' },
]);

const systemStatuses = computed(() => [
  { value: SystemStatus.DRAFT, label: '草稿', color: 'default' },
  { value: SystemStatus.PUBLISHED, label: '已发布', color: 'blue' },
  { value: SystemStatus.ACTIVE, label: '运行中', color: 'green' },
  { value: SystemStatus.INACTIVE, label: '已下线', color: 'orange' },
  { value: SystemStatus.DEPRECATED, label: '已废弃', color: 'red' },
  { value: SystemStatus.RETIRED, label: '已退役', color: 'gray' },
]);

// 方法
const getResourceTypeColor = (type: ResourceType) => {
  const typeMap: Record<ResourceType, string> = {
    [ResourceType.DIGITAL]: 'cyan',
    [ResourceType.HUMAN]: 'blue',
    [ResourceType.PHYSICAL]: 'orange',
    [ResourceType.SERVICE]: 'purple',
    [ResourceType.VIRTUAL]: 'geekblue',
    [ResourceType.CAPABILITY]: 'green',
  };
  return typeMap[type] || 'default';
};

const getResourceTypeLabel = (type: ResourceType) => {
  const typeOption = resourceTypes.value.find((t) => t.value === type);
  return typeOption?.label || type;
};

const getStatusColor = (status: SystemStatus) => {
  const statusOption = systemStatuses.value.find((s) => s.value === status);
  return statusOption?.color || 'default';
};

const getStatusLabel = (status: SystemStatus) => {
  const statusOption = systemStatuses.value.find((s) => s.value === status);
  return statusOption?.label || status;
};

// 保存资源
const saveResource = async () => {
  try {
    await resourceApi.update(props.resource.id, props.resource);
    message.success('资源保存成功');
    emit('update');
  } catch (error) {
    message.error('资源保存失败');
    console.error('Save resource error:', error);
  }
};

// 更新各个facet的回调方法
const updateAttributes = (attributes: any) => {
  props.resource.facets.attributes = attributes;
};

const updateLifecycle = (lifecycle: any) => {
  props.resource.facets.lifecycle = lifecycle;
};

const updateBehaviors = (behaviors: any) => {
  props.resource.facets.behaviors = behaviors;
};

const updateEvents = (events: any) => {
  props.resource.facets.events = events;
};

const updateRelations = (relations: any) => {
  props.resource.facets.relations = relations;
};

const updateCapability = (capability: any) => {
  props.resource.facets.capability = capability;
};

const updateVersions = (versions: any) => {
  props.resource.facets.versions = versions;
};

const updateMonitoring = (monitoring: any) => {
  props.resource.facets.monitoring = monitoring;
};

const updateGovernance = (governance: any) => {
  props.resource.governance = governance;
};
</script>

<template>
  <div class="resource-detail">
    <!-- 资源基本信息 -->
    <div class="detail-header">
      <div class="resource-info">
        <h3>{{ resource.name }}</h3>
        <div class="resource-meta">
          <a-tag :color="getResourceTypeColor(resource.type)">
            {{ getResourceTypeLabel(resource.type) }}
          </a-tag>
          <a-tag :color="getStatusColor(resource.systemStatus)">
            {{ getStatusLabel(resource.systemStatus) }}
          </a-tag>
          <a-tag color="blue">{{ resource.version }}</a-tag>
          <span class="resource-code">{{ resource.code }}</span>
        </div>
      </div>
      <div class="resource-actions">
        <a-button type="primary" @click="saveResource">
          <template #icon>
            <IconifyIcon icon="ant-design:save-outlined" />
          </template>
          保存
        </a-button>
        <a-button @click="emit('update')">
          <template #icon>
            <IconifyIcon icon="ant-design:reload-outlined" />
          </template>
          刷新
        </a-button>
      </div>
    </div>

    <!-- 资源详情标签页 -->
    <a-tabs v-model:active-key="activeTab" class="detail-tabs">
      <!-- 概览 -->
      <a-tab-pane key="overview" tab="概览">
        <ResourceOverview :resource="resource" />
      </a-tab-pane>

      <!-- 属性 -->
      <a-tab-pane key="attributes" tab="属性">
        <ResourceAttributes
          :attributes="resource.facets.attributes"
          @update="updateAttributes"
        />
      </a-tab-pane>

      <!-- 状态机 -->
      <a-tab-pane key="lifecycle" tab="状态机">
        <ResourceLifecycle
          :lifecycle="resource.facets.lifecycle"
          @update="updateLifecycle"
        />
      </a-tab-pane>

      <!-- 行为 -->
      <a-tab-pane key="behaviors" tab="行为">
        <ResourceBehaviors
          :behaviors="resource.facets.behaviors"
          @update="updateBehaviors"
        />
      </a-tab-pane>

      <!-- 事件 -->
      <a-tab-pane key="events" tab="事件">
        <ResourceEvents
          :events="resource.facets.events"
          @update="updateEvents"
        />
      </a-tab-pane>

      <!-- 关系 -->
      <a-tab-pane key="relations" tab="关系">
        <ResourceRelations
          :relations="resource.facets.relations"
          @update="updateRelations"
        />
      </a-tab-pane>

      <!-- 能力（仅当类型为CAPABILITY时显示） -->
      <a-tab-pane
        v-if="resource.type === 'CAPABILITY'"
        key="capability"
        tab="能力"
      >
        <ResourceCapability
          :capability="resource.facets.capability"
          @update="updateCapability"
        />
      </a-tab-pane>

      <!-- 版本 -->
      <a-tab-pane key="versions" tab="版本">
        <ResourceVersions
          :versions="resource.facets.versions"
          @update="updateVersions"
        />
      </a-tab-pane>

      <!-- 监控 -->
      <a-tab-pane key="monitoring" tab="监控">
        <ResourceMonitoring
          :monitoring="resource.facets.monitoring"
          @update="updateMonitoring"
        />
      </a-tab-pane>

      <!-- 治理 -->
      <a-tab-pane key="governance" tab="治理">
        <ResourceGovernance
          :governance="resource.governance"
          @update="updateGovernance"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped>
.resource-detail {
  height: 100%;
  display: flex;
  flex-direction: column;

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;

    .resource-info {
      flex: 1;

      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 600;
      }

      .resource-meta {
        display: flex;
        align-items: center;
        gap: 8px;

        .resource-code {
          color: #666;
          font-family: monospace;
          font-size: 12px;
        }
      }
    }

    .resource-actions {
      display: flex;
      gap: 8px;
    }
  }

  .detail-tabs {
    flex: 1;
    overflow: hidden;

    :deep(.ant-tabs-content) {
      height: 100%;
      overflow: auto;
    }

    :deep(.ant-tabs-tabpane) {
      height: 100%;
      padding: 16px 24px;
    }
  }
}
</style>
